<template>
    <div>
        <SearchBox placeHolder="快递单查询"></SearchBox>
        <div class="container">
            <NewGoodsCard v-for="(item, index) in list" :key="index" :goodsInfo="item">
                <template v-slot:header>
                    <van-cell :title="'快递单号：' + item.orderCode" is-link />
                </template>
                <template v-slot:center>
                    <div class="txt-info">
                        <div><span>下单时间</span>{{ item.createTime }}</div>
                        <div><span>发货人</span>{{ item.consignor }}</div>
                        <div><span>收货人</span>{{ item.consignee }}</div>
                    </div>
                </template>
                <template v-slot:btn>
                    <van-button v-if="item.star" type="primary" class="watch-evaluate" @click="toDetail(item.id)"
                        >查看评价</van-button
                    >
                    <van-button v-else type="primary" class="evaluate" @click="toDetail(item.id, 'write')"
                        >评价</van-button
                    >
                </template>
            </NewGoodsCard>
        </div>
        <keep-alive>
            <router-view class="subContainer"></router-view>
        </keep-alive>
    </div>
</template>

<script>
import SearchBox from '@/components/SearchTemp';
import NewGoodsCard from '@/components/NewGoodsCard';
import { WuLiuListApi } from '@/request/api';

export default {
    data() {
        return {
            list: [],
        };
    },
    created() {
        WuLiuListApi({
            current: 1,
            size: 20,
        }).then((res) => {
            this.list = res.data.records;
        });
    },
    methods: {
        toDetail(id, status) {
            this.$router.push({
                path: '/wuliudan/evaluationDetail/' + id,
                query: {
                    status,
                },
            });
        },
    },
    watch: {
        $route(to, from) {
            let tempPath = /wuliudan\/evaluationDetail/;
            if (tempPath.test(from.path)) {
                if (to.meta.refresh) {
                    WuLiuListApi({
                        current: 1,
                        size: 20,
                    }).then((res) => {
                        this.list = res.data.records;
                    });
                }
            }
        },
    },
    components: {
        SearchBox,
        NewGoodsCard,
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: calc(100vh - 1.72rem);
    overflow: auto;
}
.subContainer {
    width: 100%;
    height: calc(100vh - 0.72rem);
    position: fixed;
    left: 0;
    top: 0.72rem;
    background-color: #f5f5f5;
}
</style>
